
                <!DOCTYPE html>
                <html lang="zh">
                <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>主账户首页</title>
                  <style>
                    *,
                    *::before,
                    *::after {
                      box-sizing: border-box;
                      margin: 0;
                    }
                    .iframe-outer {
                      position: fixed;
                      top: 0;
                      left: 0;
                      bottom: 0;
                      right: 0;
                      display: flex;
                      justify-content: center;
                      background-color: #E0E0E0;
                    }
                    .iframe-wrapper {
                      width: 100%;
                      height: 100%;
                      margin: 0 auto;
                      transform-origin: center top;
                      flex-shrink: 0;
                    }
                    #dynamicIframe {
                      border: none;
                      width: 100%;
                      height: 100%;
                    }
                  </style>
                  <script>
                const width = 402
                const height = 874
                const resolutionRatio = width && height ? width / height : 1
                const pageNameMap = {
                  'splash_page': '启动页',
    'login_page': '登录页',
    'register_page': '注册页',
    'forgot_password_page': '忘记密码页',
    'main_account_home_page': '主账户首页',
    'associated_account_home_page': '关联账户首页',
    'personal_settings_page': '个人设置',
    'edit_profile_page': '编辑个人信息页',
    'change_password_page': '修改密码页',
    'account_management_page': '账户管理',
    'associated_account_detail_page': '关联账户详情',
    'edit_associated_account_page': '编辑关联账户页',
    'create_associated_account_page': '新建关联账户',
    'goal_list_page': '目标列表',
    'create_learning_goal_page': '创建学习目标',
    'create_life_goal_page': '创建生活目标',
    'learning_goal_detail_page': '学习目标详情',
    'edit_learning_goal_page': '编辑学习目标页',
    'life_goal_detail_page': '生活目标详情',
    'edit_life_goal_page': '编辑生活目标页',
    'plan_list_page': '计划列表',
    'create_study_plan_page': '创建学习计划',
    'study_plan_detail_page': '学习计划详情',
    'edit_study_plan_page': '编辑学习计划页',
    'goals_plans_dashboard_page': '目标计划看板',
    'comment_share_page': '点评分享页',
    'reward_management_page': '奖励管理',
    'my_plans_goals_page': '我的计划与目标',
    'wish_pool_page': '许愿池',
    'create_wish_page': '创建愿望页',
    'wish_detail_page': '愿望详情页',
    'points_level_title_page': '积分等级称号',
    'reward_history_page': '积分历史页',
    'notification_center_page': '通知中心'
                }
                function setIframeSize(w, h) {
                  const currentContainerRadio = w / h
                  let widthValue = w
                  let heightValue = h
                  let zoom = 1
                  if (currentContainerRadio > resolutionRatio) {
                    widthValue = h * resolutionRatio
                    heightValue = h
                  } else {
                    widthValue = w
                    heightValue = w / resolutionRatio
                  }
                  zoom = width ? widthValue / width : 1
                  return {
                    width: widthValue / zoom + 'px',
                    height: heightValue / zoom + 'px',
                    zoom,
                  }
                }
                function adjustIframeSize() {
                  const iframeWrapper = document.querySelector(".iframe-wrapper")
                  const { width, height, zoom } = setIframeSize(window.innerWidth, window.innerHeight)
                  iframeWrapper.style.height = height
                  iframeWrapper.style.width = width
                  iframeWrapper.style.transform = 'scale(' + zoom + ')'
                }
                function sanitizeFilename(name) {
                  return name.replace(/[\/:*?"<>|]/g, '_')
                }
                function handlePostMessage(event) {
                  if (!event.data) {
                    return
                  }
                  const { type, targetPageId } = event.data
                  const targetPageName = pageNameMap[targetPageId]
                  if (type === "iframeNavigation" && targetPageId && targetPageName) {
                    window.location.href = targetPageName + '.html'
                  }
                }
                window.addEventListener('message', handlePostMessage)
                window.onload = adjustIframeSize
                window.onresize = adjustIframeSize
                window.onunload = () => {
                  window.removeEventListener('message', handlePostMessage)
                }
              </script>
                </head>
                <body>
                  <div class="iframe-outer">
                    <div class="iframe-wrapper">
                      <iframe id="dynamicIframe" srcdoc='<html lang="zh" data-theme="business"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>主账户首页</title>
    <link href="./assets/static/uxbot/daisyui@5.css" rel="stylesheet" type="text/css">
    <script src="./assets/static/uxbot/tailwind-browser@4.js"></script>
    <link href="./assets/static/uxbot/daisyui-themes.css" rel="stylesheet" type="text/css">
    <script src="./assets/3/3.1.1/iconify.min.js"></script>
    <style>
/* DaisyUI Theme Variables Customization for Learning Assistant App */
/* Based on the business theme with Material Design Dark Theme grey levels */
:root {
    /* 学习助手主题色彩定制 */
    --color-primary: rgba(59, 130, 246, 1); /* 学习主题蓝色 */
    --color-primary-content: rgba(255, 255, 255, 1);
    --color-secondary: rgba(99, 102, 241, 1); /* 辅助紫色 */
    --color-secondary-content: rgba(255, 255, 255, 1);
    --color-accent: rgba(34, 197, 94, 1); /* 成功绿色 */
    --color-accent-content: rgba(255, 255, 255, 1);
    --color-success: rgba(34, 197, 94, 1);
    --color-warning: rgba(251, 191, 36, 1);
    --color-error: rgba(239, 68, 68, 1);
    --color-info: rgba(59, 130, 246, 1);
    --color-base-100: rgba(38, 38, 38, 1); /* Material Design 深灰 */
    --color-base-200: rgba(30, 30, 30, 1);
    --color-base-300: rgba(23, 23, 23, 1);
    --color-base-content: rgba(248, 248, 248, 1);
    --radius-box: 0.75rem;
    --radius-field: 0.5rem;
}

/* 移动端安全区域适配 */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 24px);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 80px);
}

/* 底部导航栏样式 */
.bottom-dock {
    height: 64px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 顶部导航栏样式 */
.top-navbar {
    height: 56px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 触摸目标最小尺寸 */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* 卡片样式 */
.learning-card {
    border-radius: var(--radius-box);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 动画过渡 */
.smooth-transition {
    transition: all 0.2s ease-in-out;
}

/* 积分等级样式 */
.points-badge {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-primary-content);
    border-radius: var(--radius-field);
}

/* 目标完成度进度条 */
.goal-progress {
    height: 8px;
    border-radius: 4px;
    background: var(--color-base-200);
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-success), var(--color-accent));
    transition: width 0.3s ease-in-out;
}

/* 任务提醒面板 */
.task-reminder-panel {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
}

.task-reminder-panel.hidden {
    transform: translateY(100%);
}
</style> <style>
/* 主账户首页自定义样式 */

/* 卡片悬停效果 */
.learning-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* 进度条动画 */
.goal-progress-fill {
    background: linear-gradient(90deg, var(--color-success), var(--color-accent));
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.goal-progress-fill::after {
    content: &#39;&#39;;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 快捷操作按钮增强 */
.quick-action-btn {
    position: relative;
    overflow: hidden;
}

.quick-action-btn::before {
    content: &#39;&#39;;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.quick-action-btn:hover::before {
    width: 100px;
    height: 100px;
}

/* 用户头像点击效果 */
.user-avatar {
    position: relative;
    overflow: hidden;
}

.user-avatar::after {
    content: &#39;&#39;;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.user-avatar:active::after {
    transform: scale(1);
}

/* 动态列表项动画 */
.activity-item {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.5s ease forwards;
}

.activity-item:nth-child(1) { animation-delay: 0.1s; }
.activity-item:nth-child(2) { animation-delay: 0.2s; }
.activity-item:nth-child(3) { animation-delay: 0.3s; }
.activity-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 积分徽章闪烁效果 */
.points-badge {
    position: relative;
    overflow: hidden;
}

.points-badge::before {
    content: &#39;&#39;;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: pointsShine 3s infinite;
}

@keyframes pointsShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

/* 状态徽章样式增强 */
.status-badge {
    position: relative;
    overflow: hidden;
}

.status-badge.published {
    background: linear-gradient(135deg, var(--color-success), rgba(34, 197, 94, 0.8));
}

.status-badge.pending {
    background: linear-gradient(135deg, var(--color-warning), rgba(251, 191, 36, 0.8));
}

/* 卡片内容区域优化 */
.card-content-enhanced {
    background: linear-gradient(135deg, var(--color-base-200), rgba(38, 38, 38, 0.95));
    border: 1px solid rgba(248, 248, 248, 0.05);
}

/* 响应式优化 */
@media (max-width: 402px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    
    .quick-action-btn {
        padding: 8px;
    }
    
    .quick-action-btn span:last-child {
        font-size: 10px;
    }
}

/* 触摸反馈增强 */
.touch-feedback {
    transition: all 0.1s ease;
}

.touch-feedback:active {
    transform: scale(0.98);
    opacity: 0.8;
}

/* 渐变背景动画 */
.gradient-bg {
    background: linear-gradient(-45deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary));
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
</style>
  <script src="./assets/static/uxbot/25_6/holder.js"></script></head>
  <body class="bg-base-300 min-h-screen">
    <div data-section-id="common_top_navbar" data-section-type="common_header">
    <div class="fixed top-0 left-0 right-0 z-50 bg-base-300/95 top-navbar border-b border-base-content/10 safe-area-top">
        <div class="flex items-center justify-between px-4 h-14">
            <!-- 左侧导航按钮 -->
            <button class="btn btn-ghost btn-sm touch-target" onclick="handleBackNavigation()">
                <span class="iconify" data-icon="heroicons:arrow-left" data-width="24"></span>
            </button>
            
            <!-- 中间标题 -->
            <h1 class="text-lg font-semibold truncate flex-1 text-center px-4 navbar-title">学习助手</h1>
            
            <!-- 右侧操作按钮 -->
            <div class="flex items-center space-x-2 navbar-actions">
                <button class="btn btn-ghost btn-sm touch-target hidden" data-action="notifications" onclick="navigateTo(&#39;notification_center_page&#39;)">
                    <div class="indicator">
                        <span class="indicator-item badge badge-error badge-xs notification-badge hidden"></span>
                        <span class="iconify" data-icon="heroicons:bell" data-width="24"></span>
                    </div>
                </button>
                
                <button class="btn btn-ghost btn-sm touch-target hidden" data-action="search">
                    <span class="iconify" data-icon="heroicons:magnifying-glass" data-width="24"></span>
                </button>
                
                <button class="btn btn-ghost btn-sm touch-target hidden" data-action="more">
                    <span class="iconify" data-icon="heroicons:ellipsis-horizontal" data-width="24"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
[data-section-id="common_top_navbar"] .navbar-title {
    color: var(--color-base-content);
}

[data-section-id="common_top_navbar"] .notification-badge {
    animation: pulse 2s infinite;
}
</style>

<script>
(function() {
    // 顶部导航栏配置函数
    window.configTopNavbar = function(options = {}) {
        const navbar = document.querySelector(&#39;[data-section-id="common_top_navbar"]&#39;);
        if (!navbar) return;

        const title = navbar.querySelector(&#39;.navbar-title&#39;);
        const backBtn = navbar.querySelector(&#39;button[onclick*="handleBackNavigation"]&#39;);
        const notificationBtn = navbar.querySelector(&#39;[data-action="notifications"]&#39;);
        const searchBtn = navbar.querySelector(&#39;[data-action="search"]&#39;);
        const moreBtn = navbar.querySelector(&#39;[data-action="more"]&#39;);

        // 设置标题
        if (options.title) {
            title.textContent = options.title;
        }

        // 显示/隐藏返回按钮
        if (options.showBack !== undefined) {
            backBtn.style.display = options.showBack ? &#39;flex&#39; : &#39;none&#39;;
        }

        // 配置通知按钮
        if (options.showNotifications !== undefined) {
            notificationBtn.classList.toggle(&#39;hidden&#39;, !options.showNotifications);
        }

        // 配置搜索按钮
        if (options.showSearch) {
            searchBtn.classList.remove(&#39;hidden&#39;);
            searchBtn.onclick = options.searchAction || (() => {});
        } else if (options.showSearch === false) {
            searchBtn.classList.add(&#39;hidden&#39;);
        }

        // 配置更多按钮
        if (options.showMore) {
            moreBtn.classList.remove(&#39;hidden&#39;);
            moreBtn.onclick = options.moreAction || (() => {});
        } else if (options.showMore === false) {
            moreBtn.classList.add(&#39;hidden&#39;);
        }

        // 显示/隐藏整个导航栏
        if (options.show !== undefined) {
            navbar.style.display = options.show ? &#39;block&#39; : &#39;none&#39;;
        }
    };

    // 更新通知徽章
    window.updateNotificationBadge = function(count) {
        const badge = document.querySelector(&#39;[data-section-id="common_top_navbar"] .notification-badge&#39;);
        if (badge) {
            if (count > 0) {
                badge.classList.remove(&#39;hidden&#39;);
                badge.textContent = count > 99 ? &#39;99+&#39; : count.toString();
            } else {
                badge.classList.add(&#39;hidden&#39;);
            }
        }
    };

    // 隐藏导航栏函数
    window.hideTopNavbar = function() {
        const navbar = document.querySelector(&#39;[data-section-id="common_top_navbar"]&#39;);
        if (navbar) {
            navbar.style.display = &#39;none&#39;;
        }
    };

    // 显示导航栏函数
    window.showTopNavbar = function() {
        const navbar = document.querySelector(&#39;[data-section-id="common_top_navbar"]&#39;);
        if (navbar) {
            navbar.style.display = &#39;block&#39;;
        }
    };
})();
</script><!-- 页面内容区域 -->
    <div class="pt-20 pb-20 px-4">
      <!-- 用户信息和提醒区 -->
      <section data-section-id="UserInfoAndReminderSection" class="mb-6">
        <div class="card bg-base-200 shadow-lg learning-card">
          <div class="card-body p-4">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center gap-3">
                <button data-type="button" class="w-12 h-12 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-bold touch-target smooth-transition" onclick="navigateTo(&#39;personal_settings_page&#39;)">
                  张三
                </button>
                <div>
                  <h3 data-type="text" class="font-semibold text-base-content">
                    张三
                  </h3>
                  <p data-type="text" class="text-sm text-base-content/70">
                    主账户管理员
                  </p>
                </div>
              </div>
              <div class="points-badge px-3 py-1 text-sm font-medium">
                <span data-type="text">积分: </span><span data-type="text" class="user-points">1,250</span>
              </div>
            </div>
            <div class="bg-base-300/50 rounded-lg p-3 flex items-center gap-3">
              <span class="iconify text-warning" data-icon="heroicons:bell" data-width="20"></span><span data-type="text" class="text-sm text-base-content/80">今日还有3个任务待完成，继续加油！</span>
            </div>
          </div>
        </div>
      </section>
      <!-- 目标计划看板入口 -->
      <section data-section-id="GoalsPlansDashboardEntrySection" class="mb-6">
        <button data-type="button" class="card bg-gradient-to-r from-primary/20 to-secondary/20 shadow-lg learning-card w-full smooth-transition hover:scale-105" onclick="navigateTo(&#39;goals_plans_dashboard_page&#39;)">
          <div class="card-body p-4 flex-row items-center justify-between">
            <div class="flex items-center gap-3">
              <span class="iconify text-primary" data-icon="heroicons:chart-bar" data-width="24"></span><span data-type="text" class="font-semibold text-base-content">目标计划看板</span>
            </div>
            <span class="iconify text-base-content/70" data-icon="heroicons:chevron-right" data-width="20"></span>
          </div>
        </button>
      </section>
      <!-- 快捷入口区 -->
      <section data-section-id="QuickAccessSection" class="mb-6">
        <div class="card bg-base-200 shadow-lg learning-card">
          <div class="card-body p-4">
            <h3 data-type="text" class="font-semibold text-base-content mb-4">
              快捷操作
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <button data-type="button" class="flex flex-col items-center gap-2 p-3 bg-base-300/50 rounded-lg touch-target smooth-transition hover:bg-primary/10" onclick="navigateTo(&#39;create_associated_account_page&#39;)">
                <span class="iconify text-primary" data-icon="heroicons:user-plus" data-width="24"></span><span data-type="text" class="text-xs text-base-content">新建关联账户</span></button><button data-type="button" class="flex flex-col items-center gap-2 p-3 bg-base-300/50 rounded-lg touch-target smooth-transition hover:bg-primary/10" onclick="navigateTo(&#39;goal_list_page&#39;)">
                <span class="iconify text-accent" data-icon="heroicons:flag" data-width="24"></span><span data-type="text" class="text-xs text-base-content">新建目标</span></button><button data-type="button" class="flex flex-col items-center gap-2 p-3 bg-base-300/50 rounded-lg touch-target smooth-transition hover:bg-primary/10" onclick="navigateTo(&#39;plan_list_page&#39;)">
                <span class="iconify text-secondary" data-icon="heroicons:calendar-days" data-width="24"></span><span data-type="text" class="text-xs text-base-content">新建计划</span></button><button data-type="button" class="flex flex-col items-center gap-2 p-3 bg-base-300/50 rounded-lg touch-target smooth-transition hover:bg-primary/10" onclick="navigateTo(&#39;reward_management_page&#39;)">
                <span class="iconify text-warning" data-icon="heroicons:gift" data-width="24"></span><span data-type="text" class="text-xs text-base-content">奖励管理</span>
              </button>
            </div>
          </div>
        </div>
      </section>
      <!-- 我的关联账户概览 -->
      <section data-section-id="AssociatedAccountOverviewSection" class="mb-6">
        <div class="card bg-base-200 shadow-lg learning-card">
          <div class="card-body p-4">
            <div class="flex items-center justify-between mb-4">
              <h3 data-type="text" class="font-semibold text-base-content">
                我的关联账户
              </h3>
              <button data-type="button" class="btn btn-ghost btn-sm" onclick="navigateTo(&#39;account_management_page&#39;)">
                <span data-type="text" class="text-primary text-sm">查看全部</span>
              </button>
            </div>
            <div data-repeatable="true" class="space-y-3">
              <button data-type="button" class="flex items-center gap-3 p-3 bg-base-300/30 rounded-lg w-full smooth-transition hover:bg-primary/10" onclick="navigateTo(&#39;account_management_page&#39;)">
                <div class="w-10 h-10 rounded-full bg-secondary text-secondary-content flex items-center justify-center text-sm font-bold">
                  小明
                </div>
                <div class="flex-1 text-left">
                  <p data-type="text" class="font-medium text-base-content">
                    小明
                  </p>
                  <p data-type="text" class="text-xs text-base-content/70">
                    昨天完成了数学作业
                  </p>
                </div>
                <span class="iconify text-base-content/50" data-icon="heroicons:chevron-right" data-width="16"></span></button><button data-type="button" class="flex items-center gap-3 p-3 bg-base-300/30 rounded-lg w-full smooth-transition hover:bg-primary/10" onclick="navigateTo(&#39;account_management_page&#39;)">
                <div class="w-10 h-10 rounded-full bg-accent text-accent-content flex items-center justify-center text-sm font-bold">
                  小红
                </div>
                <div class="flex-1 text-left">
                  <p data-type="text" class="font-medium text-base-content">
                    小红
                  </p>
                  <p data-type="text" class="text-xs text-base-content/70">
                    今天新增了阅读目标
                  </p>
                </div>
                <span class="iconify text-base-content/50" data-icon="heroicons:chevron-right" data-width="16"></span>
              </button>
            </div>
          </div>
        </div>
      </section>
      <!-- 目标管理概览 -->
      <section data-section-id="GoalManagementSummarySection" class="mb-6">
        <div class="card bg-base-200 shadow-lg learning-card">
          <div class="card-body p-4">
            <div class="flex items-center justify-between mb-4">
              <h3 data-type="text" class="font-semibold text-base-content">
                目标管理
              </h3>
              <button data-type="button" class="btn btn-ghost btn-sm" onclick="navigateTo(&#39;goal_list_page&#39;)">
                <span data-type="text" class="text-primary text-sm">管理目标</span>
              </button>
            </div>
            <div data-repeatable="true" class="space-y-4">
              <div class="bg-base-300/30 rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                  <p data-type="text" class="font-medium text-base-content">
                    英语口语提升
                  </p>
                  <span data-type="text" class="text-sm text-accent font-medium">75%</span>
                </div>
                <div class="goal-progress mb-2">
                  <div class="goal-progress-fill" id="iajswk" style="width: 75%"></div>
                </div>
                <div class="flex items-center gap-2">
                  <div class="w-6 h-6 rounded-full bg-secondary text-secondary-content flex items-center justify-center text-xs font-bold">
                    小明
                  </div>
                  <span data-type="text" class="text-xs text-base-content/70">关联账户: 小明</span>
                </div>
              </div>
              <div class="bg-base-300/30 rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                  <p data-type="text" class="font-medium text-base-content">
                    数学成绩提升
                  </p>
                  <span data-type="text" class="text-sm text-warning font-medium">45%</span>
                </div>
                <div class="goal-progress mb-2">
                  <div class="goal-progress-fill" id="ixxsgj" style="width: 45%"></div>
                </div>
                <div class="flex items-center gap-2">
                  <div class="w-6 h-6 rounded-full bg-accent text-accent-content flex items-center justify-center text-xs font-bold">
                    小红
                  </div>
                  <span data-type="text" class="text-xs text-base-content/70">关联账户: 小红</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 计划管理概览 -->
      <section data-section-id="PlanManagementSummarySection" class="mb-6">
        <div class="card bg-base-200 shadow-lg learning-card">
          <div class="card-body p-4">
            <div class="flex items-center justify-between mb-4">
              <h3 data-type="text" class="font-semibold text-base-content">
                计划管理
              </h3>
              <button data-type="button" class="btn btn-ghost btn-sm" onclick="navigateTo(&#39;plan_list_page&#39;)">
                <span data-type="text" class="text-primary text-sm">管理计划</span>
              </button>
            </div>
            <div data-repeatable="true" class="space-y-3">
              <div class="bg-base-300/30 rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                  <p data-type="text" class="font-medium text-base-content">
                    每日英语练习计划
                  </p>
                  <div data-type="text" class="badge badge-success badge-sm">
                    已发布
                  </div>
                </div>
                <p data-type="text" class="text-xs text-base-content/70">
                  生效时间: 2025-01-01 至 2025-03-31
                </p>
              </div>
              <div class="bg-base-300/30 rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                  <p data-type="text" class="font-medium text-base-content">
                    数学强化训练计划
                  </p>
                  <div data-type="text" class="badge badge-warning badge-sm">
                    待发布
                  </div>
                </div>
                <p data-type="text" class="text-xs text-base-content/70">
                  计划时间: 2025-02-01 至 2025-04-30
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 奖励概览 -->
      <section data-section-id="RewardOverviewSection" class="mb-6">
        <button data-type="button" class="card bg-base-200 shadow-lg learning-card w-full smooth-transition hover:scale-105" onclick="navigateTo(&#39;reward_management_page&#39;)">
          <div class="card-body p-4">
            <div class="flex items-center justify-between i80lcv spark-custom-i80lcv" id="i80lcv">
              <div class="flex items-center gap-3">
                <span class="iconify text-warning" data-icon="heroicons:trophy" data-width="24"></span>
                <div class="text-left">
                  <p data-type="text" class="font-semibold text-base-content">
                    奖励评估
                  </p>
                  <p data-type="text" class="text-sm text-base-content/70">
                    本周新增积分 +180
                  </p>
                </div>
              </div>
              <span class="iconify text-base-content/70" data-icon="heroicons:chevron-right" data-width="20"></span>
            </div>
          </div>
        </button>
      </section>
      <!-- 近期动态 -->
      <section data-section-id="RecentActivitySection" class="mb-6">
        <div class="card bg-base-200 shadow-lg learning-card">
          <div class="card-body p-4">
            <h3 data-type="text" class="font-semibold text-base-content mb-4">
              近期动态
            </h3>
            <div data-repeatable="true" class="space-y-3">
              <div class="flex items-start gap-3">
                <span class="iconify text-success mt-1" data-icon="heroicons:check-circle" data-width="16"></span>
                <div class="flex-1">
                  <p data-type="text" class="text-sm text-base-content">
                    小明完成了英语口语练习
                  </p>
                  <p data-type="text" class="text-xs text-base-content/50">
                    2小时前
                  </p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="iconify text-primary mt-1" data-icon="heroicons:flag" data-width="16"></span>
                <div class="flex-1">
                  <p data-type="text" class="text-sm text-base-content">
                    小红设置了新的阅读目标
                  </p>
                  <p data-type="text" class="text-xs text-base-content/50">
                    5小时前
                  </p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="iconify text-warning mt-1" data-icon="heroicons:star" data-width="16"></span>
                <div class="flex-1">
                  <p data-type="text" class="text-sm text-base-content">
                    系统奖励：连续学习7天获得50积分
                  </p>
                  <p data-type="text" class="text-xs text-base-content/50">
                    昨天
                  </p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="iconify text-secondary mt-1" data-icon="heroicons:calendar-days" data-width="16"></span>
                <div class="flex-1">
                  <p data-type="text" class="text-sm text-base-content">
                    发布了数学强化训练计划
                  </p>
                  <p data-type="text" class="text-xs text-base-content/50">
                    2天前
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- Toast通知 --><div data-section-id="common_toast" data-section-type="common_section">
    <div id="global-toast-container" class="toast toast-top toast-center z-50">
        <!-- Toast消息将动态插入到这里 -->
    </div>
</div>

<style>
[data-section-id="common_toast"] .toast {
    padding-top: env(safe-area-inset-top, 24px);
}

[data-section-id="common_toast"] .alert {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-field);
}
</style>

<script>
(function() {
    // Toast功能已在common_script中定义
})();
</script><!-- 模态框 --><div data-section-id="common_modal" data-section-type="common_section">
    <dialog id="global-modal" class="modal">
        <div class="modal-box bg-base-200">
            <h3 class="font-bold text-lg modal-title">提示</h3>
            <div class="py-4 modal-content">
                <!-- 弹窗内容将动态插入到这里 -->
            </div>
            <div class="modal-action modal-actions">
                <button class="btn" onclick="document.getElementById(&#39;global-modal&#39;).close()">
                    关闭
                </button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
</div>

<style>
[data-section-id="common_modal"] .modal-box {
    border-radius: var(--radius-box);
    border: 1px solid var(--color-base-content)/10;
}
</style>

<script>
(function() {
    // Modal功能已在common_script中定义
})();
</script><!-- 底部导航栏 --><div data-section-id="common_bottom_dock" data-section-type="common_footer">
    <div class="fixed bottom-0 left-0 right-0 z-40 bg-base-300/95 bottom-dock border-t border-base-content/10">
        <div class="flex justify-around items-center h-full px-2">
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="home" onclick="navigateTo(getUserType() === &#39;main_account&#39; ? &#39;main_account_home_page&#39; : &#39;associated_account_home_page&#39;)">
                <span class="iconify" data-icon="heroicons:home" data-width="24"></span>
                <span class="text-xs mt-1">首页</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="goals" onclick="navigateTo(&#39;goal_list_page&#39;)">
                <span class="iconify" data-icon="heroicons:academic-cap" data-width="24"></span>
                <span class="text-xs mt-1">目标</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="plans" onclick="navigateTo(&#39;plan_list_page&#39;)">
                <span class="iconify" data-icon="heroicons:calendar-days" data-width="24"></span>
                <span class="text-xs mt-1">计划</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="points" onclick="navigateTo(getUserType() === &#39;main_account&#39; ? &#39;reward_management_page&#39; : &#39;points_level_title_page&#39;)">
                <span class="iconify" data-icon="heroicons:star" data-width="24"></span>
                <span class="text-xs mt-1">积分</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="profile" onclick="navigateTo(&#39;personal_settings_page&#39;)">
                <span class="iconify" data-icon="heroicons:user" data-width="24"></span>
                <span class="text-xs mt-1">我的</span>
            </button>
        </div>
    </div>
</div>

<style>
[data-section-id="common_bottom_dock"] .dock-item:hover {
    background-color: rgba(var(--color-primary), 0.1);
    color: var(--color-primary);
}

[data-section-id="common_bottom_dock"] .dock-item.active {
    background-color: rgba(var(--color-primary), 0.1);
    color: var(--color-primary);
}
</style>

<script>
(function() {
    // 底部导航栏功能已在common_script中定义
    
    // 页面加载时设置活跃导航项
    document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
        // 可以根据当前页面URL来设置活跃状态
        const currentPage = window.location.pathname.split(&#39;/&#39;).pop().replace(&#39;.html&#39;, &#39;&#39;);
        setActiveNavItem(currentPage);
    });
})();
</script><script>
(function() {
    // 全局命名空间
    window.APP_GLOBALS = window.APP_GLOBALS || {};
    
    // 全局导航函数
    window.navigateTo = function(targetPageId) {
        const isInIframe = window.self !== window.top;
        const targetFileName = `${targetPageId}.html`;
        
        if (isInIframe) {
            window.parent.postMessage({
                type: &#39;iframeNavigation&#39;,
                targetPageId: targetPageId
            }, &#39;*&#39;);
        } else {
            window.location.href = targetFileName;
        }
    };

    // 全局Toast通知系统
    window.showToast = function(message, type = &#39;info&#39;, duration = 3000) {
        const toastContainer = document.getElementById(&#39;global-toast-container&#39;);
        if (!toastContainer) return;

        const toast = document.createElement(&#39;div&#39;);
        toast.className = `alert alert-${type} shadow-lg`;
        
        const iconMap = {
            &#39;info&#39;: &#39;heroicons:information-circle&#39;,
            &#39;success&#39;: &#39;heroicons:check-circle&#39;,
            &#39;warning&#39;: &#39;heroicons:exclamation-triangle&#39;,
            &#39;error&#39;: &#39;heroicons:x-circle&#39;
        };
        
        toast.innerHTML = `
            <span class="iconify" data-icon="${iconMap[type] || iconMap.info}" data-width="20"></span>
            <span>${message}</span>
        `;
        
        toastContainer.appendChild(toast);

        // 自动移除
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, duration);
    };

    // 全局Modal系统
    window.showModal = function(title, content, buttons = []) {
        const modal = document.getElementById(&#39;global-modal&#39;);
        const modalTitle = modal.querySelector(&#39;.modal-title&#39;);
        const modalContent = modal.querySelector(&#39;.modal-content&#39;);
        const modalActions = modal.querySelector(&#39;.modal-actions&#39;);

        modalTitle.textContent = title;
        modalContent.innerHTML = content;

        // 清空并设置按钮
        modalActions.innerHTML = &#39;&#39;;
        buttons.forEach(button => {
            const btn = document.createElement(&#39;button&#39;);
            btn.className = `btn ${button.class || &#39;btn-primary&#39;}`;
            btn.textContent = button.text;
            btn.onclick = button.action || (() => modal.close());
            modalActions.appendChild(btn);
        });

        modal.showModal();
    };

    // 任务提醒面板控制
    window.taskReminderControl = {
        show: function(taskInfo) {
            const panel = document.querySelector(&#39;[data-section-id="common_task_reminder"]&#39;);
            if (panel) {
                panel.classList.remove(&#39;hidden&#39;);
                this.updateTask(taskInfo);
            }
        },
        hide: function() {
            const panel = document.querySelector(&#39;[data-section-id="common_task_reminder"]&#39;);
            if (panel) {
                panel.classList.add(&#39;hidden&#39;);
            }
        },
        updateTask: function(taskInfo) {
            const panel = document.querySelector(&#39;[data-section-id="common_task_reminder"]&#39;);
            if (panel &amp;&amp; taskInfo) {
                const titleEl = panel.querySelector(&#39;.task-title&#39;);
                const timeEl = panel.querySelector(&#39;.task-time&#39;);
                const subjectEl = panel.querySelector(&#39;.task-subject&#39;);
                
                if (titleEl) titleEl.textContent = taskInfo.title || &#39;即将开始任务&#39;;
                if (timeEl) timeEl.textContent = taskInfo.time || &#39;&#39;;
                if (subjectEl) subjectEl.textContent = taskInfo.subject || &#39;&#39;;
            }
        }
    };

    // 底部导航激活状态
    window.setActiveNavItem = function(pageId) {
        const navItems = document.querySelectorAll(&#39;[data-section-id="common_bottom_dock"] .dock-item&#39;);
        navItems.forEach(item => {
            item.classList.remove(&#39;text-primary&#39;, &#39;bg-primary/10&#39;);
            item.classList.add(&#39;text-base-content&#39;);
        });

        // 页面与导航项映射
        const navMapping = {
            &#39;main_account_home_page&#39;: &#39;home&#39;,
            &#39;associated_account_home_page&#39;: &#39;home&#39;,
            &#39;goal_list_page&#39;: &#39;goals&#39;,
            &#39;create_learning_goal_page&#39;: &#39;goals&#39;,
            &#39;create_life_goal_page&#39;: &#39;goals&#39;,
            &#39;plan_list_page&#39;: &#39;plans&#39;,
            &#39;create_study_plan_page&#39;: &#39;plans&#39;,
            &#39;goals_plans_dashboard_page&#39;: &#39;dashboard&#39;,
            &#39;points_level_title_page&#39;: &#39;points&#39;,
            &#39;reward_management_page&#39;: &#39;points&#39;,
            &#39;personal_settings_page&#39;: &#39;profile&#39;,
            &#39;account_management_page&#39;: &#39;profile&#39;
        };

        const activeNavId = navMapping[pageId];
        if (activeNavId) {
            const activeItem = document.querySelector(`[data-nav-id="${activeNavId}"]`);
            if (activeItem) {
                activeItem.classList.remove(&#39;text-base-content&#39;);
                activeItem.classList.add(&#39;text-primary&#39;, &#39;bg-primary/10&#39;);
            }
        }
    };

    // 用户类型检测 (可以根据实际登录状态来判断)
    window.getUserType = function() {
        // 这里应该根据实际的用户登录状态来判断
        // 暂时返回主账户类型作为默认值
        return APP_GLOBALS.userType || &#39;main_account&#39;;
    };

    // 积分更新函数
    window.updatePoints = function(points, level, title) {
        APP_GLOBALS.userPoints = points;
        APP_GLOBALS.userLevel = level;
        APP_GLOBALS.userTitle = title;
        
        // 更新页面中的积分显示
        const pointsElements = document.querySelectorAll(&#39;.user-points&#39;);
        pointsElements.forEach(el => {
            el.textContent = points;
        });
    };

    // 返回上一页函数
    window.handleBackNavigation = function() {
        if (window.history.length > 1) {
            window.history.back();
        } else {
            // 如果没有历史记录，根据用户类型跳转到对应首页
            const userType = getUserType();
            if (userType === &#39;main_account&#39;) {
                navigateTo(&#39;main_account_home_page&#39;);
            } else {
                navigateTo(&#39;associated_account_home_page&#39;);
            }
        }
    };
})();
</script><script>
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    // 配置顶部导航栏
    if (typeof configTopNavbar === &#39;function&#39;) {
        configTopNavbar({
            title: &#39;主账户首页&#39;,
            showBack: false,
            showNotifications: true,
            show: true
        });
    }

    // 设置底部导航活跃状态
    if (typeof setActiveNavItem === &#39;function&#39;) {
        setActiveNavItem(&#39;main_account_home_page&#39;);
    }

    // 模拟用户数据
    const userData = {
        name: &#39;张三&#39;,
        points: 1250,
        level: 5,
        title: &#39;学习达人&#39;
    };

    // 模拟关联账户数据
    const associatedAccounts = [
        { name: &#39;小明&#39;, avatar: &#39;小明&#39;, lastActivity: &#39;昨天完成了数学作业&#39;, color: &#39;secondary&#39; },
        { name: &#39;小红&#39;, avatar: &#39;小红&#39;, lastActivity: &#39;今天新增了阅读目标&#39;, color: &#39;accent&#39; }
    ];

    // 模拟目标数据
    const goals = [
        { title: &#39;英语口语提升&#39;, progress: 75, account: &#39;小明&#39;, accountColor: &#39;secondary&#39; },
        { title: &#39;数学成绩提升&#39;, progress: 45, account: &#39;小红&#39;, accountColor: &#39;accent&#39; }
    ];

    // 模拟计划数据
    const plans = [
        { title: &#39;每日英语练习计划&#39;, status: &#39;published&#39;, dateRange: &#39;2025-01-01 至 2025-03-31&#39; },
        { title: &#39;数学强化训练计划&#39;, status: &#39;pending&#39;, dateRange: &#39;2025-02-01 至 2025-04-30&#39; }
    ];

    // 模拟近期动态数据
    const recentActivities = [
        { type: &#39;success&#39;, icon: &#39;heroicons:check-circle&#39;, text: &#39;小明完成了英语口语练习&#39;, time: &#39;2小时前&#39; },
        { type: &#39;primary&#39;, icon: &#39;heroicons:flag&#39;, text: &#39;小红设置了新的阅读目标&#39;, time: &#39;5小时前&#39; },
        { type: &#39;warning&#39;, icon: &#39;heroicons:star&#39;, text: &#39;系统奖励：连续学习7天获得50积分&#39;, time: &#39;昨天&#39; },
        { type: &#39;secondary&#39;, icon: &#39;heroicons:calendar-days&#39;, text: &#39;发布了数学强化训练计划&#39;, time: &#39;2天前&#39; }
    ];

    // 初始化页面数据
    function initializePageData() {
        // 更新用户积分信息
        if (typeof updatePoints === &#39;function&#39;) {
            updatePoints(userData.points, userData.level, userData.title);
        }

        // 添加动态列表项的动画类
        const activityItems = document.querySelectorAll(&#39;#RecentActivitySection .space-y-3 > div&#39;);
        activityItems.forEach((item, index) => {
            item.classList.add(&#39;activity-item&#39;);
        });
    }

    // 进度条动画
    function animateProgressBars() {
        const progressBars = document.querySelectorAll(&#39;.goal-progress-fill&#39;);
        progressBars.forEach((bar, index) => {
            const targetWidth = goals[index]?.progress || 0;
            let currentWidth = 0;
            const increment = targetWidth / 50; // 50 steps for smooth animation
            
            const animate = () => {
                if (currentWidth < targetWidth) {
                    currentWidth += increment;
                    bar.style.width = Math.min(currentWidth, targetWidth) + &#39;%&#39;;
                    requestAnimationFrame(animate);
                }
            };
            
            // 延迟启动动画
            setTimeout(animate, index * 200);
        });
    }

    // 添加触摸反馈
    function addTouchFeedback() {
        const touchElements = document.querySelectorAll(&#39;button, .card&#39;);
        touchElements.forEach(element => {
            element.classList.add(&#39;touch-feedback&#39;);
        });
    }

    // 模拟数据加载
    function simulateDataLoading() {
        // 显示骨架屏效果（如果需要）
        const cards = document.querySelectorAll(&#39;.learning-card&#39;);
        cards.forEach(card => {
            card.style.opacity = &#39;0&#39;;
            card.style.transform = &#39;translateY(20px)&#39;;
        });

        // 模拟加载延迟
        setTimeout(() => {
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.transition = &#39;all 0.5s ease&#39;;
                    card.style.opacity = &#39;1&#39;;
                    card.style.transform = &#39;translateY(0)&#39;;
                }, index * 100);
            });
        }, 300);
    }

    // 处理快捷操作点击
    function handleQuickActions() {
        const quickActionBtns = document.querySelectorAll(&#39;[data-section-id="QuickAccessSection"] button&#39;);
        quickActionBtns.forEach(btn => {
            btn.classList.add(&#39;quick-action-btn&#39;);
            
            btn.addEventListener(&#39;click&#39;, function(e) {
                // 添加点击涟漪效果
                const ripple = document.createElement(&#39;div&#39;);
                ripple.style.position = &#39;absolute&#39;;
                ripple.style.borderRadius = &#39;50%&#39;;
                ripple.style.background = &#39;rgba(59, 130, 246, 0.3)&#39;;
                ripple.style.transform = &#39;scale(0)&#39;;
                ripple.style.animation = &#39;ripple 0.6s linear&#39;;
                ripple.style.left = (e.clientX - btn.offsetLeft) + &#39;px&#39;;
                ripple.style.top = (e.clientY - btn.offsetTop) + &#39;px&#39;;
                ripple.style.width = ripple.style.height = &#39;20px&#39;;
                ripple.style.marginLeft = ripple.style.marginTop = &#39;-10px&#39;;
                
                btn.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
        });
    }

    // 添加涟漪动画CSS
    const rippleStyle = document.createElement(&#39;style&#39;);
    rippleStyle.textContent = `
        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(rippleStyle);

    // 处理通知提醒
    function handleNotifications() {
        // 模拟通知数量
        if (typeof updateNotificationBadge === &#39;function&#39;) {
            updateNotificationBadge(3);
        }
    }

    // 页面可见性变化处理
    function handleVisibilityChange() {
        document.addEventListener(&#39;visibilitychange&#39;, function() {
            if (!document.hidden) {
                // 页面重新可见时刷新数据
                console.log(&#39;页面重新可见，刷新数据&#39;);
                // 这里可以添加数据刷新逻辑
            }
        });
    }

    // 错误处理
    function handleErrors() {
        window.addEventListener(&#39;error&#39;, function(e) {
            console.error(&#39;页面错误:&#39;, e.error);
            if (typeof showToast === &#39;function&#39;) {
                showToast(&#39;页面加载出现问题，请刷新重试&#39;, &#39;error&#39;);
            }
        });
    }

    // 初始化所有功能
    function initialize() {
        try {
            initializePageData();
            simulateDataLoading();
            addTouchFeedback();
            handleQuickActions();
            handleNotifications();
            handleVisibilityChange();
            handleErrors();
            
            // 延迟启动进度条动画
            setTimeout(animateProgressBars, 800);
            
            console.log(&#39;主账户首页初始化完成&#39;);
        } catch (error) {
            console.error(&#39;初始化失败:&#39;, error);
        }
    }

    // 启动初始化
    initialize();
});
</script>
  

<script>
    setTimeout(() => {
      Holder.run({
        domain: "placehold.co"
      })
    }, 100)
  </script></body></html>'></iframe>
                    </div>
                  </div>

                </body>
                </html>
            